<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript调试测试页面</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .result { background: #f5f5f5; padding: 10px; margin: 10px 0; border-radius: 5px; }
        .error { background: #ffe6e6; color: red; }
        .success { background: #e6ffe6; color: green; }
    </style>
</head>
<body>
    <h1>🔧 JavaScript函数测试</h1>
    
    <button onclick="testFunctions()">测试函数</button>
    <button onclick="testAPICall()">测试API调用</button>
    <button onclick="testRenderFunction()">测试渲染函数</button>
    
    <div id="results"></div>
    
    <!-- 加载脚本 - 确保顺序正确 -->
    <script src="/web/assets/js/trim.js"></script>
    <script src="/web/assets/js/main.js"></script>
    
    <script>
        function log(message, isError = false) {
            const results = document.getElementById('results');
            const div = document.createElement('div');
            div.className = 'result ' + (isError ? 'error' : 'success');
            div.innerHTML = `<strong>${new Date().toLocaleTimeString()}</strong>: ${message}`;
            results.appendChild(div);
        }
        
        function testFunctions() {
            log('开始测试函数定义...');
            
            // 测试函数是否存在
            if (typeof showTrims === 'function') {
                log('✅ showTrims函数已定义');
            } else {
                log('❌ showTrims函数未定义', true);
            }
            
            if (typeof renderTrimSpecs === 'function') {
                log('✅ renderTrimSpecs函数已定义');
            } else {
                log('❌ renderTrimSpecs函数未定义', true);
            }
            
            if (typeof renderCategoryArraySpecs === 'function') {
                log('✅ renderCategoryArraySpecs函数已定义');
            } else {
                log('❌ renderCategoryArraySpecs函数未定义', true);
            }
        }
        
        async function testAPICall() {
            log('开始测试API调用...');
            try {
                const response = await fetch('/api/get_trims?model=Puma');
                const data = await response.json();
                log(`✅ API调用成功，获取到 ${data.trims ? data.trims.length : 0} 个配置`);
                
                if (data.trims && data.trims.length > 0) {
                    const firstTrim = data.trims[0];
                    log(`第一个配置: ${firstTrim.trim_info?.trim_name || 'Unknown'}`);
                    
                    if (firstTrim.specs) {
                        log(`规格数据类型: ${typeof firstTrim.specs}`);
                        log(`规格数据预览: ${JSON.stringify(firstTrim.specs).substring(0, 100)}...`);
                    }
                }
            } catch (error) {
                log(`❌ API调用失败: ${error.message}`, true);
            }
        }
        
        function testRenderFunction() {
            log('开始测试渲染函数...');
            
            // 测试数据
            const testSpecsData = {
                "Battery": [
                    {"spec_name": "Battery Capacity", "spec_value": "43", "spec_unit": "kWh"},
                    {"spec_name": "Range", "spec_value": "200", "spec_unit": "miles"}
                ],
                "Engine": [
                    {"spec_name": "Power", "spec_value": "200", "spec_unit": "hp"}
                ]
            };
            
            try {
                if (typeof renderCategoryArraySpecs === 'function') {
                    const result = renderCategoryArraySpecs(testSpecsData);
                    log('✅ renderCategoryArraySpecs函数执行成功');
                    log(`渲染结果长度: ${result.length} 字符`);
                    
                    // 显示渲染结果
                    const div = document.createElement('div');
                    div.innerHTML = '<h3>渲染结果预览:</h3>' + result;
                    document.getElementById('results').appendChild(div);
                } else {
                    log('❌ renderCategoryArraySpecs函数不存在', true);
                }
            } catch (error) {
                log(`❌ 渲染函数执行失败: ${error.message}`, true);
            }
        }
        
        // 页面加载完成后自动测试
        window.addEventListener('load', function() {
            log('🚀 页面加载完成，开始自动测试...');
            setTimeout(testFunctions, 100);
        });
    </script>
</body>
</html>
